<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 560px;
            height: 312px;
            background-color: rgb(249, 247, 248);
            border: 1px solid rgb(222, 222, 222);
            margin-left: 10px;
            margin-top: 10px;
        }
    
        .left {
            width: 456px;
            float: left;
        }
    
        .left img {
            width: 440px;
            height: 293px;
            margin-left: 8px;
            margin-top: 8px;
        }
    
        .right {
            height: 293px;
            margin-left: 8px;
            margin-top: 8px;
        }
    
        .right img {
            width: 95px;
            height: 62px;
            margin-top: 8px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"><img src="./1.jpg" /></div>
        <div class="right">
            <img src="./1.jpg" />
            <img src="./2.jpg" />
            <img src="./3.jpg" />
            <img src="./4.jpg" />
        </div>
    </div>
    <script>
        // 1、自动切换 图片
        // 2、鼠标移入右侧的图片 左边切换到对应的图片  鼠标移出  以当前的图片 自动继续切换图片
        // 3、当前显示的小图片 透明度为1  其他没有显示的保证透明度为0.5
        // 全局变量保存当前显示的图片
        var index = 0;
        // 保存定时器标识
        var timer;
        var leftImg = document.querySelector('.left>img');
        var rightSmallImg = document.querySelectorAll('.right>img');
        changeOpacity();
        play();
        // 实现自动切换图片
        function play() {
            timer = setInterval(function () {
                index++;
                // index最大值只能为3 一旦最后一张图片 下一张就是第一张图片
                if (index > 3) {
                    index = 0;
                }
                // 设置左边图片地址
                leftImg.src = rightSmallImg[index].src;
                // 控制透明度  除了当前显示的图片透明度为1 其他的都是0.5
                // rightSmallImg.forEach(function(imgDom){
                //     imgDom.style.opacity = 0.5;
                // })
                // rightSmallImg[index].style.opacity = 1;
                // 等价于 上面的写法
                changeOpacity();
            }, 1000);
        }

        function changeOpacity() {
            rightSmallImg.forEach(function (imgDom, i) {
                // 每次循环 i表示的是下标 index 也是下标 并且正好对应上
                imgDom.style.opacity = index == i ? 1 : 0.5;
            })
        }


        rightSmallImg.forEach(function (dom, i) {
            dom.addEventListener('mouseover', function () {
                // 清除定时器
                clearInterval(timer);
                // 设置左侧显示的是当前图片
                leftImg.src = this.src;
                // 修改index的记录值
                index = i;
                // 修改透明度
                changeOpacity();
            })
            dom.addEventListener('mouseout', play)
        })
    </script>
</body>
</html>